<template>
    <div>
        <transition name="fade">
            <div class="create-popup" style="z-index: 999" v-if="cpt.explainShow">
                <h1 class="create-popup-tit">{{ $t('m.sicbo.explain.explain[0]') }}</h1>
                <div class="create-content">
                    <div>
                        <p class="create-content-text">
                            {{ $t('m.sicbo.explain.explain[1]') }}
                            <span class="create-line"></span>
                            {{ $t('m.sicbo.explain.explain[2]') }}
                            <span class="create-line"></span>
                            {{ $t('m.sicbo.explain.explain[21]') }}
                            <span class="create-line"></span>
                            {{ $t('m.sicbo.explain.explain[3]') }}
                            <span class="create-line"></span>
                            {{ $t('m.sicbo.explain.explain[4]') }}
                            <span class="create-line"></span>
                            {{ $t('m.sicbo.explain.explain[5]') }}<span class="fontw">{{ $t('m.sicbo.explain.explain[6]') }}</span>
                            <span class="create-line"></span>
                            {{ $t('m.sicbo.explain.explain[7]') }}<span class="fontw">{{ $t('m.sicbo.explain.explain[8]') }}</span>
                            <span class="create-line"></span>
                            {{ $t('m.sicbo.explain.explain[9]') }}<span class="fontw">{{ $t('m.sicbo.explain.explain[10]') }}</span>
                            <span class="create-line"></span>
                            {{ $t('m.sicbo.explain.explain[11]') }}<span class="fontw">{{ $t('m.sicbo.explain.explain[12]') }}</span>
                            <span class="create-line"></span>
                            {{ $t('m.sicbo.explain.explain[13]') }}<span class="fontw">{{ $t('m.sicbo.explain.explain[14]') }}</span>
                            <span class="create-line"></span>
                            {{ $t('m.sicbo.explain.explain[16]') }}
                            <span class="create-line"></span>
                            <span class="fontw">{{ $t('m.sicbo.explain.explain[17]') }}</span>
                            <span class="create-line"></span>
                            <span class="fontw">{{ $t('m.sicbo.explain.explain[18]') }}</span>
                            <span class="create-line"></span>
                            <span class="fontw">{{ $t('m.sicbo.explain.explain[19]') }}</span>
                            <span class="create-line"></span>
                            <span class="fontw">{{ $t('m.sicbo.explain.explain[20]') }}</span>
                        </p>
                    </div>
                </div>
                <button class="create-next" @click="aCpt({explainShow: false})">{{ $t('m.sicbo.explain.explain[15]') }}</button>
            </div>
        </transition>
        <transition name="bg">
            <div class="mui-backdrop" v-if="cpt.explainShow"></div>
        </transition>
    </div>
</template>
<script>
    export default {
        name: 'Sicbo_explain',
        data() {
            return {
            }
        },
    }
</script>
<style scoped>
    .create-content {
        height: calc(100% - 3rem);
    }

    .create-line {
        margin: .1rem;
        display: block;
    }

    .fontw {
        font-weight: normal;
    }

    .create-next {
        background-color: #FF4081;
        padding: 0;
        height: 40px;
        font-size: 14px;
    }

    .fade-enter-active, .fade-leave-active {
        transition: all 0.5s;
    }

    .fade-enter, .fade-leave-to {
        transform: translate(-50%, 10rem);
    }

    .bg-enter-active, .bg-leave-active {
        transition: all 0.5s;
    }

    .bg-enter, .bg-leave-to {
        opacity: 0;
    }
</style>
